<template>
  <div class="constCommittee">
    <div class="nav">
      <span class="title">杭 州 市 装 配 式 建 筑 质 量 监 管 平 台</span>
      <span class="back">返回</span>
      <span class="fullScreen" v-if="isFullScreen" @click="fullScreen">全屏</span>
      <span class="exitScreen" v-else>退出</span>
    </div>
    <el-row :gutter="40">
      <el-col :span="6">
        <Information class="component-contents"></Information>
        <MemberScale class="component-contents"></MemberScale>
        <MemberNum class="component-contents"></MemberNum>
      </el-col>
      <el-col :span="12">
        <BuildMap class="component-map"></BuildMap>
      </el-col>
      <el-col :span="6">
        <UnitStatistics class="component-contents"></UnitStatistics>
        <BuildType class="component-contents"></BuildType>
        <ProProgress class="component-contents"></ProProgress>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Information from "./information";
import BuildType from "./buildType";
import MemberNum from "./memberNum";
import MemberScale from "./memberScale";
import ProProgress from "./proProgress";
import UnitStatistics from "./unitStatistics";
import BuildMap from "./buildMap";
export default {
  components: {
    Information,
    BuildType,
    MemberNum,
    MemberScale,
    ProProgress,
    UnitStatistics,
    BuildMap
  },
  data() {
    return {
      isFullScreen: true
    };
  },
  methods:{
    fullScreen(){
    var el = document.documentElement;

        var rfs = el.requestFullScreen || el.webkitRequestFullScreen;

        if (typeof rfs != "undefined" && rfs) {

          rfs.call(el);

        } else if (typeof window.ActiveXObject != "undefined") {

          var wscript = new ActiveXObject("WScript.Shell");

          if (wscript != null) {

            wscript.SendKeys("{F11}");

          }

        } else if (el.msRequestFullscreen) {

          el.msRequestFullscreen();

        } else if (el.oRequestFullscreen) {

          el.oRequestFullscreen();

        } else {

          swal({title: "浏览器不支持全屏调用！", text: "请更换浏览器或按F11键切换全屏！(3秒后自动关闭)", type: "error", timer: 3000});

        }
  }
  }
};
</script>
<style lang="scss" scoped>
.constCommittee {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: url("/static/img/constCommitteeBg.png") no-repeat;
  background-size: 100% 100%;
  padding: 0 40px;
  .nav {
    height: 65px;
    width: 100%;
    color: #0ff;
    font-size: 16px;
    position: relative;
    text-align: center;
    .title {
      font-size: 30px;
      color: #e6e6e6;
    }
    .back {
      position: absolute;
      right: 60px;
      top: 40px;
    }
    .fullScreen {
      position: absolute;
      right: 140px;
      top: 40px;
    }
  }
  .component-contents {
    width: 100%;
    height: 28vh;
    overflow: hidden;
    background: url("/static/img/constCommitteeBg1.png") no-repeat;
    background-size: 100% 100%;
    margin-bottom: 20px;
  }
  .component-map {
    width: 100%;
    height: 85vh;
    padding:2vh;
    margin-top: 10px;
    background: url("/static/img/constCommitteeBg2.png") no-repeat;
    background-size: 100% 100%;
  }
}
</style>